<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        ul{
            overflow: hidden;
        }
        
        li{
            width: 100px;
            height: 40px;
            line-height: 40px;
            float: left;
            text-align: center;
            background-color: #e5e5e5;
            border: 1px solid #cccccc;
        }
        div{
            width: 406px;
            height: 406px;
            border: 1px solid #cccccc;
        }
        
        img{
            width: 406px;
            height: 406px;
            display: none;
        }
    </style>
</head>
<body>
<ul>
    <li>大橘</li>
    <li>英短</li>
    <li>美短</li>
    <li>布偶</li>
</ul>
<div>
    <img src="img/ju.jpg" alt="" style="display: block;">
    <img src="img/ying.jpg" alt="">
    <img src="img/hu.jpg" alt="">
    <img src="img/bu.jpg" alt="">
</div>
<script>
    let li = document.getElementsByTagName('li');
    console.log(li)
    let img = document.getElementsByTagName('img');
    for (var i = 0; i < li.length; i++) {
        li[i].index=i;

        li[i].onmouseover=function () {
            this.style.backgroundColor="pink";
            console.log('mouseover: '+this.index)
            for (var j = 0; j < img.length; j++) {
                img[j].style.display='none';

            }
            img[this.index].style.display = 'block';
        }

        li[i].onmouseout=function () {
            this.style.backgroundColor='#e5e5e5'
        }
    }
</script>
</body>
</html>